<!-- pages/components/form/form.vue -->
<template>
    <view class="wrapper">
        <!-- 1. 绑定 @submit 和 @reset 事件 -->
        <form @submit="handleSubmit" @reset="handleReset">
            
            <!-- 2. 必须给表单项添加 name 属性 -->
            <view class="form-item">
                <text>用户名:</text>
                <!-- input 必须有 name -->
                <input name="username" placeholder="请输入用户名" />
            </view>
            
            <view class="form-item">
                <text>同意协议:</text>
                <!-- switch 必须有 name -->
                <switch name="agree" />
            </view>
            
            <view class="form-item">
                <text>满意度:</text>
                <!-- slider 必须有 name -->
                <slider name="satisfaction" min="0" max="100" show-value />
            </view>
            
            <view class="form-item-column">
                <text>性别:</text>
                <!-- radio-group 必须有 name -->
                <radio-group name="gender">
                    <label><radio value="male" />男</label>
                    <label style="margin-left: 15px;"><radio value="female" />女</label>
                </radio-group>
            </view>
            
            <view class="form-item-column">
                <text>备注:</text>
                <!-- textarea 必须有 name -->
                <textarea name="bio" placeholder="请输入备注..." style="border: 1px solid #eee; width: 100%;" />
            </view>
            
            <!-- 3. 提交与重置按钮 -->
            <view class="button-group">
                <button type="primary" form-type="submit">提 交</button>
                <button type="default" form-type="reset">重 置</button>
            </view>
            
        </form>
        
        <!-- 结果展示 -->
        <view class="title">表单提交的数据包:</view>
        <view class="result-box">
            {{formData}}
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 用于存放提交后的数据
const formData = ref({});

// 4. 提交事件处理
const handleSubmit = (e) => {
    console.log('表单提交了！', e.detail.value);
    // e.detail.value 就是 <form> 打包好的数据对象
    formData.value = e.detail.value;
    
    uni.showToast({
        title: '提交成功',
        icon: 'success'
    });
};

// 5. 重置事件处理
const handleReset = () => {
    console.log('表单重置了！');
    formData.value = {}; // 清空展示的数据
};
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
.form-item, .form-item-column {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.form-item text {
    width: 80px;
}
.form-item input {
    flex: 1;
}
.form-item-column {
    flex-direction: column;
    align-items: flex-start;
}
.button-group {
    margin-top: 20px;
}
.button-group button {
    margin-bottom: 10px;
}
.result-box {
    background-color: #f4f4f4;
    padding: 10px;
    min-height: 50px;
    font-size: 14px;
    color: #333;
}
</style>